<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改电子名片新闻')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: cropper-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-contentList-edit" th:object="${ecardNewsContentList}">
        <input name="id" th:field="*{id}" type="hidden">
        <input name="channelId" id="channelId" th:field="*{channelId}" type="hidden">
        <!--<div class="form-group">
            <label class="col-sm-3 control-label is-required">独立法人机构：</label>
            <div class="col-sm-8">
                <select name="deptId" id="deptId" class="form-control m-b" onchange="deptChange()"
                        th:with="type=${@dept.selectDeptListByType('2')}"
                        required>
                    <option th:each="dept : ${type}" th:text="${dept.deptName}" th:value="${dept.deptId}"
                            th:field="*{deptId}"></option>
                </select>
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">频道：</label>

            <div class="col-sm-8">
                <select name="channelIds" id="channelIds" class="form-control m-b" onchange="channelIdChange()">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">标题：</label>
            <div class="col-sm-8">
                <input name="title" th:field="*{title}" class="form-control" maxlength="32"
                       type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">首页显示：</label>
            <div class="col-sm-8">
                <select name="indexSts" class="selectpicker form-control m-b"
                        th:with="type=${@dict.getType('common_yes_no')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}" th:field="*{indexSts}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">热点新闻：</label>
            <div class="col-sm-8">
                <select name="hotSts" class="selectpicker form-control m-b"
                        th:with="type=${@dict.getType('common_yes_no')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}" th:field="*{hotSts}"></option>
                </select>
            </div>
        </div>
  <!--      <div class="form-group">
            <label class="col-sm-3 control-label">标题图片：</label>
            <div class="col-sm-8">
                <input type="hidden" name="img" th:field="*{img}">
                <div class="file-loading">
                    <input class="form-control file-upload" id="img" name="file" type="file">
                </div>
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">标题图片：<span
                    style="color: red">(160px*118px)</span>：</label>
            <div class="col-sm-8">
                <input type="hidden" id="img" name="img" th:field="*{img}">
                <div class="imageBox">
                    <img id="imgId"
                         th:src="(${#strings.isEmpty(ecardNewsContentList.img)}) ? @{/img/default.png} : @{${ecardNewsContentList.img}}"
                         th:onerror="'this.src=\'' + @{'/img/default.png'} + '\''">
                </div>
                <div class="action">
                    <div class="new-contentarea tc">
                        <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label>
                        </a>
                        <input type="file" name="poster" id="inputImage" accept="image/*"/>
                    </div>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i
                            class="fa fa-search-plus"></i></button>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i
                            class="fa fa-search-minus"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i
                            class="fa fa-rotate-left"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i
                            class="fa fa-rotate-right"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i
                            class="fa fa-arrows-h"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i
                            class="fa fa-arrows-v"></i></button>
                    <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label is-required">来源：</label>
            <div class="col-sm-8">
                <input name="source" th:field="*{source}" class="form-control" maxlength="32"
                       type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">链接：</label>
            <div class="col-sm-8">
                <input name="link" th:field="*{link}" class="form-control" maxlength="256"
                       type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">概要：</label>
            <div class="col-sm-8">
                <textarea name="summary" class="form-control" required>[[*{summary}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">网页内容：</label>
            <div class="col-sm-8">
                <input type="hidden" class="form-control" th:field="*{html}">
                <div class="summernote" id="html"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">发布时间：</label>
            <div class="col-sm-8">
                <input name="pubDate" th:field="*{pubDate}" class="form-control"
                       type="text" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">状态：</label>
            <div class="col-sm-8">
                <select name="sts" class="selectpicker form-control m-b"
                        th:with="type=${@dict.getType('sys_sts')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}" th:field="*{sts}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: cropper-js"/>
<script th:inline="javascript">
    var prefix = ctx + "config/contentList";
    $("#form-contentList-edit").validate({
        focusCleanup: true
    });
    $(document).ready(function () {
        deptChange();
    });
    var cropper;
    var croppable = false;
    $(window).on('load', function () {
        var image = document.getElementById('imgId');
        cropper = new Cropper(image, {
            aspectRatio: 1.356,//设置宽高比例
            viewMode: 1,
            autoCropArea: 1,
            //preview: '.img-preview',
            ready: function () {
                croppable = true;
            }
        })

        $('#inputImage').on('change', function () {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                reader.onload = function (e) {
                    if (croppable) {
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                $.modal.alertWarning('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click', function (e) {
            if (!croppable) {
                $.modal.alertWarning("裁剪框加载中,请稍候...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if (['scaleX', 'scaleY'].indexOf(data.method) !== -1) {
                $(this).data('option', -data.option)
            }
        })
    });
    //设置裁剪高度
    $(window).resize(function () {
        $('.imageBox').height("200px");
        $('.cropped').height("85px");
    }).resize();
    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function (callback, type, quality) {
                var canvas = this;
                setTimeout(function () {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }
    function submitHandler() {
        if (!croppable) {
            $.modal.alertWarning("裁剪框加载中,请稍候...");
            return
        }
        if ($.validate.form()) {
            //校验图片上传
            const inputImage = $("#inputImage").val();
            const img = $("#img").val();
            if (img == '' && inputImage == '') {
                $.modal.alertError("请上传新闻图片！");
                return
            }
            cropper.getCroppedCanvas().toBlob(function (img) {
                var formdata = new FormData();
                formdata.append("file", img);
                formdata.append("fileType", "/ecard/newsImg");
                $.ajax({
                    url: ctx + "common/uploadCropperImage",
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        $("#img").val(result.data.fileUrl);
                        $.operate.save(prefix + "/edit", $('#form-contentList-edit').serialize());
                    }
                })
            });
        }
    }

    $(".file-upload").fileinput({
        uploadUrl: ctx + 'common/upload',
        maxFileCount: 1,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })
    $(function () {
        $('.summernote').each(function (i) {
            $('#' + this.id).summernote({
                lang: 'zh-CN',
                dialogsInBody: true,
                callbacks: {
                    onChange: function (contents, $edittable) {
                        $("input[name='" + this.id + "']").val(contents);
                    },
                    onImageUpload: function (files) {
                        var obj = this;
                        var data = new FormData();
                        data.append("file", files[0]);
                        $.ajax({
                            type: "post",
                            url: ctx + "common/upload/ecard",
                            data: data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            dataType: 'json',
                            success: function (result) {
                                if (result.code == web_status.SUCCESS) {
                                    if (ctx.length > 1) {
                                        $('#' + obj.id).summernote('insertImage', ctx + result.url);
                                    } else {
                                        $('#' + obj.id).summernote('insertImage', result.url);
                                    }
                                } else {
                                    $.modal.alertError(result.msg);
                                }
                            },
                            error: function (error) {
                                $.modal.alertWarning("图片上传失败。");
                            }
                        });
                    }
                }
            });
            var content = $("input[name='" + this.id + "']").val();
            $('#' + this.id).summernote('code', content);
        })
    });


    function deptChange() {
        var deptId = $('#deptId').val();
        var channelId = $('#channelId').val();
        if (deptId != "") {
            $.ajax({
                type: "post",
                url: ctx + "config/channelList/channelList",
                data: {"deptId": deptId},
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        var channelIdStr = '<option value="">请选择</option>';
                        var channelData = result.data;
                        for (var i = 0; i < channelData.length; i++) {
                            if (channelData[i].channelId == channelId) {
                                channelIdStr += '<option value="' + channelData[i].channelId + '" selected="selected">' + channelData[i].name + '</option>';
                            } else {
                                channelIdStr += '<option value="' + channelData[i].channelId + '">' + channelData[i].name + '</option>';
                            }
                        }
                        $('#channelIds').html(channelIdStr);
                    }
                }
            });
        }
    }

    function channelIdChange() {
        $('#channelId').val($('#channelIds').val());
    }
</script>
</body>
</html>